<template>
    <div>
        <el-row type="flex" align="middle">
            <el-col :span="12" class="alignRight">
                <span>桌号：</span>
            </el-col>
            <el-col :span="12" class="alignLeft">
                <el-input v-model="seatsId" placeholder="桌号" size="small" class="myInput"></el-input>
            </el-col>
        </el-row>
        <!--<el-row type="flex" align="middle" style="margin-top: 20px">-->
        <!--<el-col :span="12" class="alignRight">-->
        <!--<span>外卖单号：</span>-->
        <!--</el-col>-->
        <!--<el-col :span="12" class="alignLeft">-->
        <!--<el-input v-model="mainId" placeholder="外卖单号" size="small" class="myInput"></el-input>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <el-row style="margin-top: 50px;text-align: center">

            <el-button type="primary" class="buttonSize"
                       @click="invoTableSelect">确定
            </el-button>

        </el-row>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "invoSelectTableNo",
        created(){
            // console.log('created');
        },
        mounted(){
            // console.log('mounted');
        },
        computed:{
            seatsId:{
                get:function () {
                    return this.$store.state.invoiceStore.seatsId

                },
                set:function (val) {
                    this.$store.state.invoiceStore.seatsId=val
                }
            },
        },
        data() {
            return {
                // seatsId: this.$store.state.invoiceStore.seatsId,
                mainId: '',
            }
        },
        methods: {
            ...mapActions(['invoTableSelectSt', 'tableSelectSt']),
            openCenter() {
                this.$message({
                    message: '无此桌号账单',
                    center: true
                });
            },
            invoTableSelect() {

                let obj = {mainId: this.mainId, seatsId: this.seatsId}

                if (this.$store.state.invoiceStore.number) {
                    console.log('invoTableSelectSt');
                    this.invoTableSelectSt(obj).then(res => {
                        console.log(res);
                        if (res.code === 200) {
                            this.$router.push('/front/invoicing/invoBuyOrder')
                        } else {
                            this.openCenter()
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {

                    this.tableSelectSt(obj).then(res => {
                        console.log(res);
                        if (res.Code === 200) {
                            this.$router.push('/front/invoicing/invoBuyOrder')
                        } else {
                            this.openCenter()
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }

            }
        }

    }
</script>

<style scoped>
    .alignLeft {
        text-align: left;
    }

    .alignRight {
        text-align: right;
    }

    .myInput {
        width: 150px;
    }

    .buttonSize {
        height: 30px;
        width: 100px;
        padding: 0;
    }
</style>